<template>
  <div help-tip-content >
    <svg-icon icon-class="path" style="font-size: 80px"/>
    <el-card style="margin-top: -18px;margin-left: 30px">
      <div style="height: 185px;width: 350px;">
        <div style="height:70%;position:relative;text-align: center;top: -17%">
          <svg-icon icon-class="bell-message" style="font-size: 150px;"/>
          <div style="margin-top: -20px">
            <div id="tHtml" class="content" v-if="typeof message==='object' && message.type==='html'" v-html="message.content"/>
            <span v-else class="content">
            {{typeof message==='object'?message.content:message}}
          </span>
          </div>
        </div>
        <div style="position: absolute;bottom: 16px;right: 24px">
          <el-link @click="doIKnow" :underline="false" style="margin-right: 20px" type="primary">我知道了</el-link>
          <el-button size="small" type="primary" @click="$emit('next')">下一步</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "menu-tip-content",
  props:{
    message:String | Object
  },
  data(){
    return {
      eventMap:new Map()
    }
  },
  methods:{
    doIKnow(){
      this.$emit('close')
    },
    doUpload(){
      this.$message.success('确实在上传！')
    },
    initMethod(dom,event,doWhat){
      this.eventMap.set(event, { dom, doWhat:this[doWhat]})
      dom.addEventListener(event,this[doWhat])
    },
    initMethods(dom){
      const attrs = (dom.attributes && dom.attributes.length>0) ? Array.from(dom.attributes) :[]
      const children = (dom.childNodes && dom.childNodes.length>0) ? Array.from(dom.childNodes) :[]
      attrs.forEach(attr=>{
        if(attr.name.startsWith('@')){
          this.initMethod(dom,attr.name.substring(1),attr.value)
        }
      })
      children.forEach(dom=>this.initMethods(dom))
    }
  },
  beforeDestroy() {
    this.eventMap.forEach((info, event) => info.dom.removeEventListener(event, info.doWhat));
  },
  mounted() {
    const dom = document.querySelector(`#tHtml`)
    dom && this.initMethods(dom)
  }
};
</script>

<style lang="scss">
 [help-tip-content]{
   .el-card {
     border: 1px solid #FFFFFF !important;
     background-color: #FFFFFF !important;
     color: #000000 !important;
   }

   .content {
     font-size: 12px;
     float: left;
     margin-left: 24px
   }
 }
</style>
